<template>
  <div id="hero">
    <button type="button" class="btn btn-primary" @click="goAdd">添加英雄</button>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>编号</th>
          <th>英雄名称</th>
          <th>性别</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in list" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.gender}}</td>
          <td>{{item.time}}</td>
          <td>
            <button type="button" class="btn btn-success" @click="edit(item.id)">编辑</button>
            <button type="button" class="btn btn-danger" @click="del(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
      <tr v-if="this.list.length === 0">
        <td colspan="5" style="text-align:center">没有更多数据了~</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list:[]
    }
  },
  methods:{
    // 获取列表
    getlist(){
      this.$http.get('http://localhost:6005/heroList')
      .then((res) => {
        // console.log(res);
        console.log('获取列表数据成功');
        this.list = res.data
      })
    },
    // 删除
    del(id){
      this.$http.delete(`http://localhost:6005/heroList/${id}`)
      .then((res) => {
        // console.log(res);
        console.log('删除成功');
        this.getlist()
      })
    },
    // 添加英雄
    goAdd(){
      this.$router.push({
        path:'/HeroAdd'
      })
    },
    // 编辑英雄
    edit(id){
      this.$router.push({
        path:'/herodedit',
        query:{
          id
        }
      })
    }
  },
  mounted(){
   this.getlist()
  },
}
</script>

<style>

</style>